<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/16 02:12:35
  @file: Product.vue
  @description:
  ==================
  Product 主页面，包含一些公共组件
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="product">
    <LoadingPage :showLoading="showLoading" />
    <MySwiper :swiperList="big_images" />
    <!-- 公共导航组件 -->
    <NavigationFrame :lists="lists" />
    <router-view></router-view>
  </div>
</template>
<script>
import LoadingPage from '@/components/loading-page';
import NavigationFrame from '@/components/navigation-frame.vue';
import MySwiper from '@/components/my-swiper.vue';
export default {
  name: 'GFProduct',
  components: {
    NavigationFrame,
    MySwiper,
    LoadingPage
  },
  mounted () {
    this.getApi();
  },
  data () {
    return {
      lists: [
        { path: '/Product/Pipeline', class: 'icon-guandao', name: '管道产业' },
        { path: '/Product/Plumbing', class: 'icon-yugang', name: '家居水暖' },
        { path: '/Product/Building', class: 'icon-building-materials', name: '钢筋建材' }
      ],
      big_images: [/* 坑 */],
      small_images: [],
      showLoading: true
    };
  },
  methods: {
    async getApi () {
      const { data: res } = await this.$http('/gftopen/product/lunbo');
      const { lunbo } = res.message;

      this.big_images = lunbo.big || [];
      await this.loadImage(this.big_images);
    },
    loadImage (urlArr) {
      console.log('urlArr', urlArr);
      if (urlArr.length <= 0) return;
      let i = 0;
      let timer = null;
      const len = urlArr.length;
      const load = (url) => {
        if (i < len) {
          const image = new Image();
          image.src = url;
          timer = setInterval(() => {
            if (image.complete) {
              console.log('complete');
              clearInterval(timer);
              load(urlArr[i++]);
            }
          }, 80);
        } else {
          console.log(this.showLoading);
          this.showLoading = false; /* 所有图片加载完后的操作 */
        }
      };
      load(urlArr[i].img_url);
    }
  }
};
</script>

<style lang='scss' scoped>
</style>
